<template>
  <el-form label-width="6vw">
    <el-form-item :label="t('editFormula.partNo')">
      <el-select
        v-model="config.bagCode"
        :placeholder="$t('editFormula.partNo')"
        filterable
        @change="partNoChange"
      >
        <el-option
          v-for="item of material.package"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="t('editFormula.describe')">
      <el-input
        v-model="config.desc"
        :placeholder="t('editFormula.describe')"
      ></el-input>
    </el-form-item>
    <el-form-item :label="t('editFormula.long')">
      <el-input-number v-model="config.bagWidth" readonly></el-input-number>
    </el-form-item>
    <el-form-item :label="t('editFormula.width')">
      <el-input-number v-model="config.bagHeigh" readonly></el-input-number>
    </el-form-item>
    <el-form-item label="包装袋类型">
      <el-select v-model="config.bagType" placeholder="包装袋类型">
        <el-option label="铝箔袋" :value="0"></el-option>
        <el-option label="透明袋" :value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="包含logo">
      <el-switch
        v-model="config.hasLogo"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <el-form-item label="包含ESD标签">
      <el-switch
        v-model="config.hasESD"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <template v-if="config.hasESD">
      <el-form-item label="ESD料号">
        <el-input
          v-model="config.esdMaterialCode"
          placeholder="ESD料号"
        ></el-input>
      </el-form-item>
      <el-form-item label="ESD类型">
        <el-input v-model="config.esdModel" placeholder="ESD类型"></el-input>
      </el-form-item>

      <el-form-item label="ESD坐标X">
        <el-input-number v-model="config.esdPositionX"></el-input-number>
      </el-form-item>
      <el-form-item label="ESD坐标Y">
        <el-input-number v-model="config.esdPositionY"></el-input-number>
      </el-form-item>
      <el-form-item label="ESD旋转角度">
        <el-input-number v-model="config.esdPositionR"></el-input-number>
      </el-form-item>
      <el-form-item label="ESD粘贴面">
        <el-switch
          v-model="config.esdSizeInBag"
          :active-value="0"
          :inactive-value="1"
          active-text="正面"
          inactive-text="反面"
        ></el-switch>
      </el-form-item>
    </template>
    <el-form-item label="注入氮气">
      <el-switch
        v-model="config.isNeedSealingNitrogen"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <el-form-item label="是否氦气检测">
      <el-switch
        v-model="config.isNeedHeliumTest"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <el-form-item label="抽真空">
      <el-switch
        v-model="config.isNeedSealingVacuum"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <template v-if="config.isNeedSealingVacuum">
      <el-form-item label="抽真空时间">
        <el-input-number v-model="config.mbbVacuumTime"></el-input-number>
      </el-form-item>
      <!-- <el-form-item label="抽真空容量">
        <el-input-number v-model="config.vacuumVolume"></el-input-number>
      </el-form-item> -->
    </template>
    <el-form-item label="ng是否封口">
      <el-switch
        v-model="config.ngSealing"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <el-form-item label="是否封口">
      <el-switch
        v-model="config.hasSealing"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item>
    <template v-if="config.hasSealing">
      <el-form-item label="封口时间">
        <el-input-number v-model="config.mbbSealingTime"></el-input-number>
      </el-form-item>
      <el-form-item label="封口加热次数">
        <el-input-number v-model="config.mbbSealingTimes"></el-input-number>
      </el-form-item>
      <el-form-item label="封口距离">
        <el-input-number
          v-model="config.mbbSealingLineDistance"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="冷却时间">
        <el-input-number v-model="config.mbbCoolingTime"></el-input-number>
      </el-form-item>
    </template>

    <!-- <el-form-item label="入盒折袋">
      <el-switch
        v-model="config.fold"
        active-text="是"
        inactive-text="否"
      ></el-switch>
    </el-form-item> -->
    <!-- <el-form-item label="包装袋特征">
      <el-switch
        v-model="config.characteristic"
        active-text="有"
        inactive-text="无"
      ></el-switch>
    </el-form-item> -->
    <el-form-item label="入袋角度">
      <el-input-number v-model="config.mbBinReelAngle"></el-input-number>
    </el-form-item>
    <el-form-item label="推盘入袋">
      <el-switch
        v-model="config.reelInMBBUpSide"
        :active-value="0"
        :inactive-value="1"
        active-text="正面"
        inactive-text="反面"
      ></el-switch>
    </el-form-item>
  </el-form>
</template>
<script setup>
import editStore from "@/store/editStore";
import { computed } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const store = editStore();
const config = computed(() => store.packageConfig);
let material = computed(() => {
  let list = store.materialList;
  return {
    package: list.mBBBag,
  };
});

function partNoChange(e) {
  let mbbs = material.value.package;
  let mbb = mbbs.find((item) => item.materialCode == e);
  if (mbb) {
    config.value.desc = mbb.description;
    config.value.bagWidth = mbb.length;
    config.value.bagHeigh = mbb.width;
    config.value.frontImg = mbb?.imgPath?.[0] ?? "";
    config.value.oppositeImg = mbb?.imgPath?.[1] ?? "";
  }
}
</script>
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
.el-input-number {
  width: 100%;
}
</style>
